<template>
  <div class="radar-warp">
    <div id="radarChart" class="radar-chart"></div>
    <div class="radar-content">
      <div class="radar-item" v-for="(item, index) in state.radarData" :key="index">
        <div class="title">{{ item.name }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import on from "gdt-jsapi/on";
import { onMounted, reactive } from "vue";

const state = reactive({
  radarData: [
    { name: "响应完成时长", value: 100 },
    { name: "力量前置比", value: 100 },
    { name: "处置到场时长", value: 100 },
    { name: "处置抽排力量", value: 100 },
    { name: "处置时长", value: 100 },
  ],
});

onMounted(() => {
  const chart = echarts.init(document.getElementById("radarChart"));

  const option = {
    title: {
      //   text: "雷达图示例",
    },
    tooltip: {},
    graphic: {
      elements: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "综合评分\n\n99.7",
            textAlign: "center",
            fontSize: 24,
            fill: "#333",
          },
        },
      ],
    },
    radar: {
      radius: "65%", // 雷达图半径比例
      center: ["50%", "50%"], // 图表中心位置（水平、垂直方向）
      indicator: [
        { name: "响应完成时长", max: 100 },
        { name: "力量前置比", max: 100 },
        { name: "处置到场时长", max: 100 },
        { name: "处置抽排力量", max: 100 },
        { name: "处置时长", max: 100 },
      ],
    },
    series: [
      {
        type: "radar",
        data: [
          {
            value: [80, 90, 70, 85, 60],
            name: "评分",
          },
        ],
        areaStyle: {
          color: "rgba(185, 227, 255)", // 设置填充颜色和透明度
        },
      },
    ],
  };

  chart.setOption(option);
});
</script>

<style lang="less" scoped>
.radar-warp {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .radar-chart {
    width: 100%;
    height: 50%;
    margin-top: 10px;
    // box-sizing: border-box;
    background: #fff;
  }

  .radar-content {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px 10px;
    text-align: center;
    .radar-item {
      padding: 10px;
      font-size: 14px;
      color: #6fc2ff;
      background: #fff;
      &:last-child {
        grid-column: 1 / -1; // 从第一列开始，跨越到最后一列
      }
    }
    .title {
      color: #3d3d3d;
    }
    .value {
      margin-top: 10px;
    }
  }
}
</style>
